<template>
  <div class="WebrtcInfo">
    <div class="titlle">{{title}}</div>
    <div>
      <el-divider direction="vertical"></el-divider>
    </div>
    <div class="opertor_menu">
      <el-dropdown
        trigger="click"
        :class="$i18n.locale == 'en-US'? 'dropdown':'dropdown_zh'"
        @command="handleCommand"
        placement="top-start"
      >
        <div class="opertor_name el-icon-user-solid">
          {{$t('m.OPERATOR')}}：{{operatorInfo.userName}}
          <i class="el-icon-arrow-down" />
        </div>
        <el-dropdown-menu :appendToBody="false" slot="dropdown">
          <el-dropdown-item command="userInfo">{{$t("m.PERSONAL_INFORMATION")}}</el-dropdown-item>
          <el-dropdown-item command="configOption">{{$t("m.CONFIGURATION_OPTIONS")}}</el-dropdown-item>
          <el-dropdown-item command="dataManage">{{$t("m.DATA_MANAGEMENT")}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="opertor_tel el-icon-phone">{{operatorInfo.mainTel}}</div>
    <div class="opertor_status">{{getOpertoeStatus(operatorInfo.mainTel)}}</div>
    <!-- 开关班 -->
    <div class="agent_status">
      <span v-if="operatorInfo.agentState == 'login'">
        <i class="el-icon-bell" />
        {{$t('m.BE_ON_DUTY')}}
      </span>
      <span v-else>
        <i class="el-icon-close-notification" />
        {{$t('m.REST')}}
      </span>
    </div>
    <div class="now_date el-icon-time">{{currentDate}} {{currentTime}}</div>
    <div class="full">
      <img @click="fullScreen" style="height:25px;width:30px" src="../../assets/img/fullwin.svg" />
    </div>
    <!-- 配置选项 -->
    <config-option v-if="openConfigOptions" :open.sync="openConfigOptions"></config-option>
    <!-- 操作员详细信息窗口 -->
    <operator-form
      v-if="userInfoDialog"
      title="操作员详细信息"
      :open.sync="userInfoDialog"
      :formData="userInfo"
    ></operator-form>
    <!-- 菜单配置 -->
    <menu-bar v-if="menuBarDialog" title="菜单配置" @handleMenu="handleMenu"></menu-bar>
    <!-- 数据管理抽屉 -->
    <data-manage :drawer.sync="drawer"></data-manage>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { userLogout } from '@/api/user'
import { destroySDK } from '@/utils/SDK'
import Webrtc2Sip from '@/utils/Webrtc2Sip'
import OperatorForm from '@/components/Gis/OperatorForm'
import DataManage from '@/components/DataManage'
import ConfigOption from '@/components/ConfigOption'
export default {
  name: 'WebrtcInfo',
  components: {
    ConfigOption,
    OperatorForm,
    DataManage,
  },
  computed: mapState({
    operatorInfo: (state) => state.cache.operatorInfo,
    operatorCallTels: (state) => state.cache.operatorCallTels, // 操作员手柄号码
    deviceStatusMap: (state) => state.cache.deviceStatusMap, //用户状态
    localWebSocketFlag: (state) => state.cache.localWebSocketFlag,
    websocketLocalClient: (state) => state.cache.websocketLocalClient,
    websocketClient: (state) => state.cache.websocketClient,
    dict: (state) => state.dict.dict,
  }),
  data() {
    return {
      title:
        localStorage.getItem('language') == 'zh-CN'
          ? projectTitle
          : projectTitle_en,
      userInfoDialog: false,
      // 配置选项
      openConfigOptions: false,
      menuBarDialog: false,
      currentDate: '',
      currentTime: '',
      drawer: false,
      userInfo: {},
      dialDialog: false,
    }
  },
  methods: {
    init() {
      this.getNowDate()
      this.timer = setInterval(() => {
        this.timer = this.getNowTime()
      }, 1000)
      let isAdmin = sessionStorage.getItem('isAdmin')
      if (isAdmin == 1) {
        this.drawer = true
      }
    },
    handleClick(type) {
      switch (type) {
        case 'call':
          this.dialDialog = true
          break
        case 'meet':
          this.$emit('handleOpenMeeting', type)
          break
        case 'over':
          this.$emit('handleClearConnection', this.operatorCallTels[0])
          break
        default:
          break
      }
    },
    handleCommand(command) {
      switch (command) {
        case 'loginOut':
          this.handleLoginOut()
          break
        case 'userInfo':
          this.handleUserInfo()
          break
        case 'configOption':
          this.handlConfigOption()
          break
        case 'menuBar':
          this.handleMenuBar()
          break
        case 'dataManage':
          this.handleDataManage()
          break
        default:
          break
      }
    },
    handleLangCommand(command) {
      switch (command) {
        case 'en':
          this.$i18n.locale = 'en-US'
          break
        case 'zh':
          this.$i18n.locale = 'zh-CN'
          break
        default:
          break
      }
    },
    //注销登录
    handleLoginOut() {
      if (this.operatorCallTels) {
        const status = this.deviceStatusMap.get(this.operatorCallTels[0])
        if (
          status == 'talk' ||
          status == 'allowspeak' ||
          status == 'hold' ||
          status == 'banspeak'
        ) {
          this.$message.warning('正在通话中，不允许退出')
          return
        }
      }
      userLogout().then((res) => {
        if (res.data.msg == 'success') {
          sessionStorage.clear()
          destroySDK()
          //软电话登出
          Webrtc2Sip.destroy()
          //摘挂机socket退出
          if (this.localWebSocketFlag) {
            let websocketLocalClient = this.websocketLocalClient
            websocketLocalClient.onclose = (msg) => {
              Message('话务台onclose', msg)
              state.localWebSocketFlag = false
              console.log('话务台onclose', msg)
            }
          }
          let websocketClient = this.websocketClient
          if (websocketClient) {
            websocketClient.close()
          }
        } else {
          this.$Message.warning('退出异常')
        }
        this.$router.push('/login')
      })
    },
    // 配置选项
    handlConfigOption() {
      this.openConfigOptions = true
    },
    // 个人资料
    handleUserInfo() {
      this.userInfo = { ...this.operatorInfo }
      this.userInfoDialog = true
    },
    //菜单配置
    handleMenuBar() {
      this.menuBarDialog = true
    },
    //数据管理
    handleDataManage() {
      this.drawer = true
    },
    //获取时间
    getNowTime() {
      var myDate = new Date()
      var hours = myDate.getHours()
      if (hours < 10) {
        hours = '0' + hours
      }
      var min = myDate.getMinutes()
      if (min < 10) {
        min = '0' + min
      }
      var sec = myDate.getSeconds()
      if (sec < 10) {
        sec = '0' + sec
      }
      if (this.currentTime == '00:00:01') {
        this.getNowDate()
      }
      this.currentTime = hours + ':' + min + ':' + sec
    },
    getNowDate() {
      var now = new Date()
      var year = now.getFullYear()
      var month = now.getMonth() + 1
      var date = now.getDate()
      this.currentDate = year + '-' + month + '-' + date + ''
    },
    //全屏
    fullScreen() {
      window.fullScreen()
    },
    //
    handleMenu(e) {
      this.menuBarDialog = e
    },
    handleCallMake() {},
    //获得当前操作员状态
    getOpertoeStatus(tel) {
      const status = this.deviceStatusMap.get(tel)
      let str = this.$t('m.dict.callStatusAll')[status]
      return str == undefined
        ? this.$t('m.dict.callStatusAll')['idle'].text
        : str.text
    },
  },
  mounted() {
    this.init()
  },
}
</script>

<style  lang="scss" scoped>
.WebrtcInfo {
  height: 100%;
  background: linear-gradient(to left, #0080e6, #76adec);
  display: flex;
  // border-bottom-left-radius: 15px;
  padding-left: 5px;
  font-size: 17px;
  // cursor: pointer;
  color: white;
  .titlle {
    width: 10%;
    text-align: center;
  }
  .opertor_menu {
    width: 25%;
    margin-left: 5%;
    .opertor_name {
      width: 100%;
      line-height: 25px;
      // color: #000;
      color: white;
      font-size: 17px;
    }
  }
  .opertor_tel {
    width: 15%;
    line-height: 25px;
  }
  .opertor_status {
    position: absolute;
    right: 350px;
    width: 130px;
    line-height: 25px;
  }
  @media screen and (max-width: 980px) {
    .opertor_status {
      right: 300px;
      width: 100px;
    }
  }
  .agent_status {
    position: absolute;
    right: 200px;
    width: 130px;
    line-height: 25px;
  }
  .now_date {
    position: absolute;
    right: 50px;
    width: 180px;
    line-height: 25px;
  }
  .full {
    position: absolute;
    right: 0px;
    width: 50px;
  }
}
.dropdown {
  width: 100%;
  cursor: pointer;
  .el-dropdown-menu__item {
    width: 200px;
  }
}
.dropdown_zh {
  width: 100%;
  cursor: pointer;
  .el-dropdown-menu__item {
    width: 100px;
  }
}
</style>
